<template>
  <div class="app-container">
    <el-card class="box-card" style="margin-bottom:1%;">
      <div slot="header" class="clearfix">
        <span>功能操作</span>
      </div>
      <div class="tree-box">
        <el-scrollbar class='tree-scroll'>
          <el-tree
            :data="menuData"
            node-key="id.hash"
            default-expand-all
            @node-click="getNode"
            :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.data.name }}</span>
              <span v-if="!node.data.children">
                <el-button
                  type="text"
                  size="mini"
                  @click="() => append(data)">
                  新增功能
                </el-button>
              </span>
            </span>
          </el-tree>
        </el-scrollbar>
      </div>
      <div class="dataTable">
        <el-table
          :data="tableData"
          border
          style="width: 100%;margin-bottom:1%;"
          :default-sort = "{prop: 'date', order: 'descending'}"
          >
          <el-table-column
            label="功能名称"
            width="150">
            <template slot-scope="scope">
                {{ scope.row.actionName }}
            </template>
          </el-table-column>
          <el-table-column
            label="功能地址/方法"
          >
            <template slot-scope="scope">
                {{ scope.row.action }}
            </template>
          </el-table-column>
          <el-table-column
            label="所属菜单"
           >
            <template slot-scope="scope">
                {{ scope.row.actionParent }}
            </template>
          </el-table-column>
          <el-table-column
            label="功能描述"
           >
            <template slot-scope="scope">
                {{ scope.row.description }}
            </template>
          </el-table-column>
          <el-table-column
            label="创建日期"
            width="180"
            prop="date"
          >
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">修改</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog title="新增功能" :visible.sync="dialogFormVisible">
      <el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="功能名称" prop="actionName">
              <el-input v-model="addForm.actionName" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="功能方法" prop="action">
              <el-input v-model="addForm.action" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="功能描述">
              <el-input v-model="addForm.description" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="功能样式" prop="isPartyMember">
              <el-input v-model="addForm.style" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { routers } from '@/router/index'
import { transform } from '@/utils/trans'
import { isvalidRequire, isvalidSpecial } from '@/utils/validate'
// 非空
var validateRequire = (rule, value, callback) => {
  if (!isvalidRequire(value)) {
    callback(new Error('请输入必填项'))
  } else {
    callback()
  }
}
// 特殊字符
var validSpecial = (rule, value, callback) => {
  if (!isvalidSpecial(value)) {
    callback(new Error('数据不能包含特殊字符'))
  } else {
    callback()
  }
}
export default {
  data() {
    return {
      menuData: [],
      tableData: [{
        actionName: '新增',
        action: '/user/add',
        actionParent: '用户管理',
        date: '2016-06-12',
        description: '用户新增的方法'
      }, {
        actionName: '删除',
        action: '/user/delete',
        actionParent: '用户管理',
        date: '2016-06-13',
        description: '用户删除的方法'
      }
      ],
      dialogFormVisible: false,
      addForm: {
        actionName: '',
        action: '',
        description: '',
        style: ''
      },
      rules: {
        actionName: [
          { required: true, message: '请输入功能名称' },
          { message: '数据不能包含特殊字符', validator: validateRequire },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        description: [
          { message: '数据不能包含特殊字符', validator: validSpecial }
        ],
        action: [
          { required: true, message: '请输入功能方法' },
          { message: '数据不能包含特殊字符', validator: validateRequire }
        ]
      }
    }
  },
  created() {
    this.menuData = this.menuData.concat(routers)
    this.menuData = transform(this.menuData, 'id', 'parentId', 'children')
  },
  methods: {
    append(data) {
      this.dialogFormVisible = true
    },

    remove(node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    },
    getNode(node, data) {
    },
    handleEdit(index, row) {
    },
    handleDelete(index, row) {
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
          this.dialogFormVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss"  scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.tree-box{float:left;width: 30%;}
.dataTable{float:left;margin-left:6%;width: 64%;}
.tree-scroll{height:300px;}

</style>

